import './style.css';
import {
    IconAdd,
    IconFavorite,
    IconFormatListBulleted,
    IconHeadphones, IconMusicNoteFill, IconPlayArrow, IconPlayArrowFill,
    IconSchedule,
    IconStar
} from "../../icons/index.js";
// document.body.clientWidth 窗口宽度
// document.body.clientHeight 窗口高度

export function siderRender() {
    const logoSize = document.body.clientHeight * 0.030;

    return `
<div class="sider">
  <div class="row align-items-center">
    <div class="col-auto logo" style="height: ${logoSize}px">
      ${IconMusicNoteFill({size: logoSize})}
    </div>
    <div class="col app-name" style="font-size: ${logoSize * 0.76}px">
      梦泡音乐
    </div>
  </div>

  <div class="menu recommend-menu">
    <div class="menu-item row align-items-center">
      <div class="menu-item-icon col-auto">${IconPlayArrowFill({size: 16})}</div>
      <div class="menu-item-title col">推荐</div>
    </div>
    <div class="menu-item row align-items-center">
      <div class="menu-item-icon col-auto">${IconHeadphones({size: 16})}</div>
      <div class="menu-item-title col">发现</div>
    </div>
  </div>

  <div class="scroll-view">
    <div class="menu my-music-menu">
      <div class="menu-title">我的音乐</div>

      <div class="menu-item row align-items-center">
        <div class="menu-item-icon col-auto">${IconFavorite({size: 16})}</div>
        <div class="menu-item-title col">我喜欢的音乐</div>
      </div>

      <div class="menu-item row align-items-center">
        <div class="menu-item-icon col-auto">${IconStar({size: 16})}</div>
        <div class="menu-item-title col">我收藏的音乐</div>
      </div>

      <div class="menu-item row align-items-center">
        <div class="menu-item-icon col-auto">${IconSchedule({size: 16})}</div>
        <div class="menu-item-title col">历史播放</div>
      </div>
    </div>

    <div class="menu my-playlist">
      <div class="menu-title row">
        <div class="col">创建的歌单</div>
        <div class="add-playlist col-auto">${IconAdd({size: 16})}</div>
      </div>

      <div class="menu-item row align-items-center">
        <div class="menu-item-icon col-auto">${IconFormatListBulleted({size: 16})}</div>
        <div class="menu-item-title col">...歌单</div>
      </div>
    </div>
  </div>
</div>
`;
}